<!--
 * @Author: chenyulei yulei.chen@fa-software.com
 * @Date: 2023-12-13 17:48:33
 * @LastEditors: chenyulei yulei.chen@fa-software.com
 * @LastEditTime: 2023-12-15 17:24:45
 * @FilePath: /mycim4-oms-ui/src/components/Query/index.vue
 * @Description: Query组件
-->
<template>
  <CollapseCard title="Search Info" :showTitle="showTitle" @collapse="collapse">
    <el-form
      :size="props.size"
      class="query"
      :labelPosition="props.labelPosition"
    >
      <el-row :gutter="8">
        <el-col
          v-for="(item, index) in itemConfig"
          :key="item.field"
          :span="item.span || span"
        >
          <el-form-item :labelWidth="props.labelWidth" :label="item.label">
            <QueryItem
              v-model="form[item.field]"
              :config="item"
              :span="span"
              :index="index"
              :labelPosition="props.labelPosition"
              @change="queryItemChange"
            />
          </el-form-item>
        </el-col>
        <el-col class="operation-col" :span="span">
          <el-form-item>
            <template v-if="$slots.operation">
              <slot name="operation" />
            </template>
            <template v-else>
              <QueryOperation
                :disabled="props.disabled"
                :span="span"
                @query="query"
                @clear="clear"
              />
            </template>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </CollapseCard>
</template>

<script setup lang="ts">
import { ref, type Ref, onMounted, onUnmounted } from "vue";
import { cloneDeep } from "@pureadmin/utils";
import CollapseCard from "../CollapseCard/index.vue";
import QueryOperation from "./components/query-operation.vue";
import QueryItem from "./components/query-item.vue";
import type { ItemConfig, Props } from "./types";

defineOptions({
  name: "QueryBox"
});

const props = withDefaults(defineProps<Props>(), {
  itemConfig: () => [],
  rowConfig: () => ({
    1920: {
      span: 3
    },
    1440: {
      span: 3
    },
    1366: {
      span: 4
    },
    1000: {
      span: 6
    }
  }),
  labelPosition: "left",
  labelWidth: 100,
  size: "default",
  disabled: () => ({
    query: false,
    clear: false
  })
});

//#region emit
interface Emits {
  (e: "change", ...args: any[]): void;
  (e: "query", val: any): void;
  (e: "clear", ...args: any[]): void;
}
const emit = defineEmits<Emits>();
//#endregion

// 当前屏幕对应的栅格
const span: Ref<number> = ref(4);
const showTitle: Ref<boolean> = ref(false);
const form: Ref<Record<string, any>> = ref({});

const getColSpan = () => {
  const windowWidth = window.innerWidth;
  // 还原默认值
  span.value = 4;
  Object.entries(props.rowConfig).map(([key, value]) => {
    if (windowWidth >= Number(key)) {
      span.value = value.span;
    }
  });
};

/**
 * @description 卡片折叠时 改变卡片是否展示标题
 * @param collapse 是否折叠
 */
const collapse = (collapse: boolean) => {
  if (collapse) {
    setTimeout(() => {
      showTitle.value = collapse;
    }, 300);
  } else {
    showTitle.value = collapse;
  }
};

const queryItemChange = (field: string, val: string | number) => {
  emit("change", field, val, form.value);
};

const query = () => {
  emit("query", form.value);
};

const clear = () => {
  const beforeClear = cloneDeep(form.value);
  props.itemConfig.forEach((item: ItemConfig) => {
    // 重置方法 默认是重置为默认数据
    if (item.clearType === "clear") {
      form.value[item.field] = null;
    } else {
      form.value[item.field] = item.defaultValue || null;
    }
  });
  const afterClear = form.value;
  emit("clear", beforeClear, afterClear);
};

const getData = () => {
  return form.value;
};

onMounted(() => {
  getColSpan();
  window.addEventListener("resize", getColSpan);
});

onUnmounted(() => {
  // 在组件销毁前移除事件监听器
  window.removeEventListener("resize", getColSpan);
});

defineExpose({
  getData,
  query,
  clear
});
</script>

<style lang="scss" scoped>
.query {
  .operation-col {
    display: flex;
    align-items: flex-end;
  }
}

:deep(.el-form) {
  .el-form-item {
    margin-bottom: 6px !important;
  }
  .el-form-item__label {
    margin-bottom: 0 !important;
    font-weight: 400;
    padding-right: 0;
    line-height: 20px !important;
    color: #333;
  }
}
</style>
